import {Router} from '@angular/router';
import {Component, OnInit, ViewChild, ElementRef, Renderer, ViewEncapsulation, OnDestroy} from '@angular/core';
import {Subject} from "rxjs";
import {ToolsService} from "app/shared/service/tools/tools.service";
import {MatchService} from "../match.service";
import {DictAreaTreeVerSionVO, DictTreeNodeVO} from "../../../interface";




@Component({
  selector: 'match-city',
  templateUrl: './match-city.component.html',
  styleUrls: ['./match-city.component.scss'],
  encapsulation: ViewEncapsulation.None
})
export class MatchCityComponent implements OnInit, OnDestroy {
  provinces: DictAreaTreeVerSionVO;
  citys: Array<any> = [];
  currentInfo: any;
  currentTab = 'province';
  @ViewChild('content') content: ElementRef;
  @ViewChild('header') header: ElementRef;
  @ViewChild('nav') nav: ElementRef;
  municipality = '北京市,天津市,上海市,重庆市,香港特别行政区,澳门特别行政区,台湾省';

  public ngUnsubscribe: Subject<void> = new Subject<void>();

  constructor(public router: Router,
              public matchService: MatchService,
              public renderer: Renderer,
              public toolsService: ToolsService) {
    this.currentInfo = matchService.currentCity;
  }

  /**
   * 获取省份信息
   */
  getProvinces() {
    this.toolsService.showLoading();
    this.matchService.getProvinces().takeUntil(this.ngUnsubscribe).subscribe((res) => {
      if (res.result === '0') {
        this.toolsService.hideLoading();
        const provinces = res.data.dictTreeNodeVOList;
        const whole = {
          "title": "全国",
          "areaId": null
        };
        provinces.unshift(whole);
        this.provinces = provinces;
      }
    });
  }

  /**
   * 选择省份
   * @param province 省对象
   */
  pickProvince(province: DictTreeNodeVO) {
    const currentCity = this.matchService.currentCity;
    currentCity.provinceName = province.title;
    // 非直辖市|非行政区|非全国
    if (this.municipality.indexOf(province.title) < 0 && province.areaId != null) {
      currentCity.provinceId = province.areaId;
      this.citys = province.dictTreeNodeList;
      this.currentTab = 'city';
      this.currentInfo.cityName = '请选择';
    } else {
      this.pickCity(province, currentCity);
      this.goBack();
    }
  }

  /**
   * 选择城市
   * @param province 省对象
   * @param currentCity 当前所选择的城市信息
   */
  pickCity(province: DictTreeNodeVO, currentCity: any) {
    // 直辖市|行政区|全国
    currentCity.cityName = '';
    if (!province.areaId) {// 全国
      currentCity.provinceId = null;
      currentCity.cityId = null;
      return;
    }
    const firstCity = province.dictTreeNodeList[0];
    if (firstCity.dictTreeNodeList.length > 0) { // 直辖市
      currentCity.provinceId = province.areaId;
      currentCity.cityId = firstCity.areaId;
    } else { // 行政区
      currentCity.provinceId = province.areaId;
      currentCity.cityId = province.areaId;
    }
  }

  /**
   * 选择城市
   * @param city 城市对象
   */
  handleCity(city) {
    const currentCity = this.matchService.currentCity;
    currentCity.cityName = city.title;
    currentCity.cityId = city.areaId;
    this.goBack();
  }

  /**
   * 返回到上级筛选页面
   */
  goBack() {
    const currentCity = this.matchService.currentCity;
    this.currentTab = 'province';
    this.matchService.backUp.citySelect = currentCity.provinceName + currentCity.cityName;
    this.router.navigate(['/match/filter']);
  }

  /**
   * 设置内容高度
   */
  setContentHeight() {
    const documentHeight = document.documentElement.clientHeight,
      headerHeight = this.header.nativeElement.clientHeight,
      navHeight = this.nav.nativeElement.clientHeight,
      contentHeight = documentHeight - headerHeight - navHeight;
    this.renderer.setElementStyle(this.content.nativeElement, 'height', contentHeight + 'px');
  }

  ngOnInit() {
    this.getProvinces();
    this.setContentHeight();
  }

  ngOnDestroy() {
    this.ngUnsubscribe.next();
    this.ngUnsubscribe.complete();
  }
}
